<template>
  <div id="app">
    <router-view id="screen" :style="{'width':`${style.width}px`,'height':`${style.height}px`,'transform':`${style.transform}`}"/>
  </div>
</template>
<script>
export default {
    components: {
    },
    data() {
        return {
            style: {
                width: "1920",
                height: "1080",
                transform: "scaleY(1) scaleX(1) translate(-50%, -50%)"
            }
        }
    },
    mounted() {
        let that = this;
        that.setScale();
        window.addEventListener('resize', () => {
            that.setScale();
        })
    },
    methods: {
        getScale() {
            const w = window.innerWidth / this.style.width;
            const h = window.innerHeight / this.style.height;
            return {x:w,y:h};
        },
        setScale() {
            let scale = this.getScale();
            this.style.transform = "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
        },
    }
}
</script>
<style lang="less">
/* 去掉百度地图logo */
.anchorBL {
  display: none;
}

body,html {
    padding: 0;
    margin: 0;
}
* {
    box-sizing: border-box;
}
#screen {
    z-index: 100;
    transform-origin: 0 0;
    position: fixed;
    left: 50%;
    top: 50%;
    transition: 0.3s;
}

.f-r {
  display: flex;
}
.f-c {
  display: flex;
  flex-direction: column;
}
.j-e {
  justify-content: flex-end;
}
.j-c {
  justify-content: center;
}
.j-b {
  justify-content: space-between;
}
.j-a {
  justify-content: space-around;
}
.a-c {
  align-items: center;
}
.a-e {
  align-items: flex-end;
}
.f-g {
  flex-grow: 1;
}
.f-s {
  flex-shrink: 0;
}
.f-w {
  flex-wrap: wrap;
}

.com-bg {
  background-image: url("./assets/icon/border.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 18px 18px 18px;
}
.bgm {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
